<template>
  <div class="hot-list-box">
    <div class="hot-list-info-box">
      <div class="hot-list-header">
        <div class="hot-list-header-items">
          <div class="hot-list-of-header" v-for="(title,index) in titleList" :key="title.id">
            <div>
              <div :class="curent===index?'header-title-active': ''" @click="switchTitle(index)">{{title.title}}</div>
            </div>
          </div>

          <!-- <div class="hot-list-of-header">
            <div>
              <div class="header-title">种草</div>
            </div>
          </div> -->

          <!-- <div class="hot-list-of-header">
            <div>
              <div class="header-title" @click.stop="more = !more">
                <i class="iconfont icon-fenlei"></i>
              </div>
            </div>
          </div> -->
        </div>
        <div class="hidden-header" v-if="more">
          <div class="hot-list-of-header">
            <div>
              <div class="header-title">知识</div>
            </div>
          </div>
        </div>
      </div>
      <div class="hot-list-info">
        <div class="info-header">
          <div class="update-time">{{updata_time}}排行榜</div>
        </div>
        <div class="info-items-box">
          <HotListItem  v-for="(item,index) in list" :key="item.video_id" :data="item" :Index="index"></HotListItem>
        </div>
      </div>

    </div>
    <div class="box">
            <Loading noMoreText='没有更多内容了~去其他页面看看吧' :loadShow="loadShow" :noMoreShow="noMoreShow" :loading="loading"></Loading>
          </div>
  </div>
</template>

<script>
import http from '@/util/http'
import scroll from '@/util/scroll'
import HotListItem from '@/components/video/hotListItem.vue'
import Loading from '@/components/utilView/loadingView.vue'
export default {
  components: {
    HotListItem,
    Loading
  },
  computed: {

  },
  data () {
    return {
      list: [], // 数据列表，
      updata_time: '', // 排行榜更新时间
      page: 1, // 页码
      classify: 0, // 获取排行榜数据的分类 0代表无分类（默认）
      curent: 0, // 头部切换的高亮下标
      titleList: [
        {
          id: 1,
          title: '全站'
        },
        {
          id: 2,
          title: '萌宠'
        },
        {
          id: 3,
          title: '科普'
        },

        {
          id: 4,
          title: '种草'
        },
        {
          id: 5,
          title: '异宠'
        }

      ], // 头部列表
      more: false,
      noMore: false, // 判断数据是否还有
      isRequest: false, // 网路请求控制
      loadShow: false, // 显示loading页面
      noMoreShow: false, // 没有更多数据提示
      loading: false // 加载中提示
    }
  },
  mounted () {
    window.addEventListener('scroll', this.windowScroll, true) // 监听页面滚动
    // 获取排行榜数据 //默认全站
    this.getlistData()
  },
  methods: {
    // 获取数据
    getlistData () {
      http.getHotList({ classify: this.classify, page: this.page }).then(res => {
        console.log(res.data.data)

        this.list = res.data.data.com_list
        this.updata_time = res.data.data.updata_time
        this.page++
        this.noMore = false

        this.loadShow = false
        this.noMoreShow = false
        // 判断是否还有足够数据
        if (res.data.data.com_list.length < 20) {
          this.noMore = true
          // 显示没有更多数据
          this.loadShow = true
          this.noMoreShow = true
        }
      })
    },
    // 切换排行榜分类
    switchTitle (index) {
      console.log(index)
      switch (index) {
        case 0 :
          this.curent = index
          this.page = 1
          this.classify = 0
          this.getlistData()
          break
        case 1 :
          this.curent = index
          this.page = 1
          this.classify = '萌宠'
          this.getlistData()
          break
        case 2 :
          this.curent = index
          this.page = 1
          this.classify = '科普'
          this.getlistData()
          break
        case 3 :
          this.curent = index
          this.page = 1
          this.classify = '种草'
          this.getlistData()
          break
        case 4 :
          this.curent = index
          this.page = 1
          this.classify = '异宠'
          this.getlistData()
          break
      }
    },
    // 实现无限加载更多数据
    // 回调函数
    windowScroll () {
      // 获取三个值

      const scrollTop = scroll.getScrollTop()
      const clientHeight = scroll.getClientHeight()
      const scrollHeight = scroll.getScrollHeight()
      // 距离底部10px时触发
      if (scrollTop + clientHeight + 10 > scrollHeight) {
        // 发送异步请求请求数据，同时携带offset并自增offset
        // noMore是自定义变量，如果是最后一批数据则以后都不加载
        if (!this.isRequest) {
          if (!this.noMore) {
            // isRequest限制请求的次数 上一次请求返回之前不会进行下一次请求 ，阻止发送多次请求
            this.isRequest = true
            // 显示加载中
            this.loadShow = true
            this.loading = true
            http.getHotList({ classify: this.classify, page: this.page }).then((res) => {
              this.list = this.list.concat(res.data.data.com_list)
              this.updata_time = res.data.data.updata_time
              // 隐藏加载更多提示
              this.loadShow = false
              this.loading = false
              this.isRequest = false
              // 判断是否还有足够数据
              if (res.data.data.com_list.length < 10) {
                this.noMore = true
                // 显示没有更多数据
                this.loadShow = true
                this.noMoreShow = true
              }
              // 增加一页
              this.page++
            })
          }
        }
      }
    }
  },

  unmounted () {
    window.removeEventListener('scroll', this.windowScroll, true)// 销毁滚动事件
    console.log('结束滚动')
  }

}
</script>

<style lang="scss" scoped>
.hot-list-box {
  width: 100%;
  display: block;

  .hot-list-info-box {
    width: 100%;
     display: block;
    .hot-list-header {
      width: 100%;
      position: relative;

      .hot-list-header-items {
        width: 100%;
        background: #fff;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border-radius: 5px;

        .hot-list-of-header {
          cursor: pointer;
          font-size: 14px;
          color: #333;
          padding: 15px;
          .header-title-active{
            color: #f60;
            font-weight: 600;
          }
        }
      }
      .hidden-header {
        width: 100%;
        background: #fff;
        display: flex;
        // justify-content: space-between;
        align-items: center;
        border-radius: 5px;
        box-shadow: #ccc 0px 0px 5px 0px;
        position: absolute;
        top: 100%;
        transition-duration: .5s;

        .hot-list-of-header {
          cursor: pointer;
          font-size: 14px;
          color: #333;
          padding: 15px;
        }
      }
    }
    .hot-list-info {
      width: 100%;
      // margin: 10px 0 20px;
      background: #fff;
      border-radius: 5px;

      .info-header {
        width: 100%;
        // border-radius: 5px;

        .update-time {
          width: 100%;
          font-size: 16px;
          font-weight: bold;
          color: #333;
          padding: 15px 0 15px 15px;
        }
      }
      .info-items-box {
        width: 100%;

      }
    }
  }
  @media screen and (max-width:540px) {
     .hot-list-info-box {
    width: 100%;
     display: block;
    .hot-list-header {
      width: 100%;
      position: relative;

      .hot-list-header-items {
        width: 100%;
        background: #fff;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border-radius: 5px;

        .hot-list-of-header {
          cursor: pointer;
          font-size: .3rem;
          color: #333;
          padding: .32rem;
          .header-title-active{
            color: #f60;
            font-weight: 600;
          }
        }
      }
      .hidden-header {
        width: 100%;
        background: #fff;
        display: flex;
        // justify-content: space-between;
        align-items: center;
        border-radius: 5px;
        box-shadow: #ccc 0px 0px 5px 0px;
        position: absolute;
        top: 100%;
        transition-duration: .5s;

        .hot-list-of-header {
          cursor: pointer;
          font-size: .3rem;
          color: #333;
          padding: .3rem;
        }
      }
    }
    .hot-list-info {
      width: 100%;
      // margin: 10px 0 20px;
      background: #fff;
      border-radius: 5px;

      .info-header {
        width: 100%;
        // border-radius: 5px;

        .update-time {
          width: 100%;
          font-size: .33rem;
          font-weight: bold;
          color: #333;
          padding: .32rem 0 .32rem .32rem;
        }
      }
      .info-items-box {
        width: 100%;

      }
    }
  }
  }
}
</style>
